<template>
	<view class="content">
		<door-navbar :isShowLeft="true" :text="tabs[0].name">		
		</door-navbar>
		<view class="swiper">
			<view v-for="(tab,index) in tabs">
				<door-empty v-if="tab.list.length == 0" text="空空如也,暂无班级信息!~"></door-empty>
				<scroll-view class="scroll" v-else @scrolltolower="scrolltolower" :scroll-y="true">
					<view class="scroll_group">
						<view class="scroll_group_item" v-for="item in tab.list">
							<view v-if="item.isMe" class="scroll_group_item_titleMe" @tap="$u.throttle(getConsumeList(item), 500)">
								{{updatename(item.classesName)}}(所属)
							</view>	
							<view v-else class="scroll_group_item_title" >
								{{updatename(item.classesName)}}
							</view>
						</view>
					</view>
				</scroll-view>
			</view>
		</view>
	</view>
</template>
<script>
	export default {
		data() {
			return {
				tabs: [{
						name: '我的班级',
						list: [],
						page: 1,
						status: 'nomore',
					}					
				],
				loadmoreText: '加载更多',
				loadingText: '努力加载中...',
				nomoreText: '没有更多了',
				schoolId: null,
				current: 0,
			};
		},
		computed:{
			updatename(){
				return function(item){
					let str
					if(item.length > 16){
						str = item.slice(0, 17) + '...'
					}else{
						return item
					}
					return str
				}
			}
		},
		onPullDownRefresh() {
			this.tabs[this.current].list = [];
			this.tabs[this.current].page = 1;
			if (this.current == 0) {
				this.getList()
			}
			setTimeout(function() {
				uni.stopPullDownRefresh();
			}, 1000);
		},
		onLoad(e) {
			this.schoolId = e.schoolId;
			this.current = 0;
			this.tabs[0].list = [];
			this.tabs[0].page = 1;			
			if (this.current == 0) {
				this.getList();
			}
		},
		methods: {
			async getList() {				
				let page = JSON.parse(JSON.stringify(this.tabs))[this.current]['page'];
				let queryForm = {};
				let userId = JSON.parse(uni.getStorageSync('userInfo')).userId;
				let phone = JSON.parse(uni.getStorageSync('userInfo')).phone;
				if (JSON.parse(uni.getStorageSync('userInfo')).isTeacher) {
					queryForm.schoolId = this.schoolId;
					queryForm.jwteacherId = userId;
					queryForm.jxteacherId = userId;
					queryForm.teacherId = userId;
					queryForm.phone = phone;
				}else {
					queryForm.schoolId = this.schoolId;
					queryForm.userId = userId;
					queryForm.phone = phone;
				}
				let res = await this.$u.api.getUserClassesListByUserId({
					pageNo: page,
					pageSize: 9999,
					...queryForm
				})
				if (res.code == 200) {
					let list = JSON.parse(JSON.stringify(this.tabs[this.current].list));
					if (page == 1) {
						list = res.data
						this.$set(this.tabs[this.current], 'list', list);
					} else {
						if (list.length < res.data.total) {
							let addList = res.data;
							list = list.concat(addList);
							this.$set(this.tabs[this.current], 'list', list);
						} else {
							this.$set(this.tabs[this.current], 'page', page - 1);
						}
					}
				}
			},
			getConsumeList(e) {
				if (this.current == 0) {
					uni.navigateTo({
						url: `/pages/mine/order?classesName=${e.classesName}`
					})
				}

			},
			scrolltolower() {
				this.tabs[this.current].page += 1;
				if (this.current == 0) {
					this.getList()
				}
			},
		}
	}
</script>
<style lang="scss">
	.nav_right {
		font-size: 28rpx;
		color: #C6C8DB;
		display: flex;
		align-items: center;
	}
	.content {
		padding: 0;
		padding-top: 88rpx;

		.tabs {
			width: 100%;
			background-color: #05061B;
			height: 100rpx;
			line-height: 100rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;

			/deep/ .u-tabs {
				width: 100%;
			}
		}

		.swiper {
			width: 100%;
			height: calc(100vh - 100rpx);
		}

		.scroll {
			width: 100%;
			height: calc(100vh - 100rpx);
			padding: 15rpx 40rpx;
			box-sizing: border-box;

			.scroll_group {
				display: flex;
				justify-content: space-between;
				align-items: center;
				flex-wrap: wrap;

				&_item {
					width: calc(50% - 15rpx);
					box-shadow:0 0px 12px 0px rgba(0, 0, 0, 0.08);
					margin-bottom: 30rpx;
					box-sizing: border-box;
					border-radius: 30rpx;
					font-size: 24rpx;
					color: #333;
					text-align: center;					
					position: relative;
					background: #ffffff;

					&_title {
						padding: 20rpx 0;						
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
					&_titleMe {
						padding: 20rpx 0;
						border-radius: 30rpx;
						background: rgb(28, 199, 194);
						width: 100%;
						white-space: nowrap;
						overflow: hidden;
						text-overflow: ellipsis;
					}
				}				
			}
		}
	}

	.sell-price {
		width: 100%;
		// background: rgba(0, 0, 0, 0.5);
		position: absolute;
		left: 0px;
		top: calc(50vw - 40rpx - 15rpx - 40rpx);
		display: flex;
		justify-content: space-between;
		padding: 0 10rpx;
		align-items: center;
		height: 40rpx;

		&-text {
			font-size: 20rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #FFFFFF;
		}

	}
</style>
